<template>
  <rx-dialog @ok="handSelectInst" @cancel="closeWindow" :okText="$ti18('rxForm.commitBtn','提交')" :btnAlign="'center'">
    <rx-fit class="rxLayout">
      <template #middle>
        <a-tabs default-active-key="myStartTable" @tabClick="tabClick">
          <a-tab-pane key="myStartTable" :tab="i18n('list.myStartTable','我的申请')">
            <div class="flowContainer" style="overflow: hidden;">
              <div class="flowHeader">
                <a-form  >
                  <a-row :gutter="24">
                    <a-col :span="8">
                      <a-form-item :label="i18n('form.itemTitle','事项标题')">
                        <a-input :placeholder="i18n('form.itemTitle','事项标题','input')" v-model:value="urlConfig['myStartTable'].queryParam['Q_i.SUBJECT__S_LK']" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item :label="i18n('form.billNo','业务单号')">
                        <a-input v-model:value="urlConfig['myStartTable'].queryParam['Q_i.BILL_NO__S_EQ']" :placeholder="i18n('form.billNo','业务单号','input')" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item >
                        <a-button type="primary" @click="search('myStartTable')">{{$ti18('rxList.searchBtn','查询')}}</a-button>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
              </div>
              <div class="flowFooter">
                  <rx-grid ref="myStartTable"
                           :hasPage="true"
                           :urlConfig="urlConfig['myStartTable']"
                           :selectConfig="selectConfig"
                           :pageConfig="pageConfig"
                           url="/api-bpm/bpm/core/bpmInst/myBpmInsts"
                           field="instId"
                           :columns="myStartColumns"
                  >
                    <template #status="{row}">
                      <a-tag :color="statusMap[row.status].color">
                        <span>{{ statusMap[row.status].text }}</span>
                      </a-tag>
                    </template>
                    <template #isLive="{row}">
                      <a-tag :color="isLiveMap[row.isLive].color">
                        <span>{{isLiveMap[row.isLive].text}}</span>
                      </a-tag>
                    </template>
                  </rx-grid>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="myTaskTable" :tab="i18n('list.myTaskTable','我的待办')" force-render>
            <div class="flowContainer">
              <div class="flowHeader">
                <a-form  >
                  <a-row :gutter="24">
                    <a-col :span="8">
                      <a-form-item :label="i18n('form.itemTitle','事项标题')">
                        <a-input :placeholder="i18n('form.itemTitle','事项标题','input')" v-model:value="urlConfig['myTaskTable'].queryParam['Q_v.SUBJECT__S_LK']" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item :label="i18n('form.billNo','业务单号')">
                        <a-input v-model:value="urlConfig['myTaskTable'].queryParam['Q_v.BILL_NO__S_EQ']" :placeholder="i18n('form.billNo','业务单号','input')" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item >
                        <a-button type="primary" @click="search('myTaskTable')">{{$ti18('rxList.searchBtn','查询')}}</a-button>
                      </a-form-item>

                    </a-col>
                  </a-row>
                </a-form>
              </div>
              <div class="flowFooter">
                  <rx-grid ref="myTaskTable"
                           :hasPage="true"
                           :urlConfig="urlConfig['myTaskTable']"
                           :selectConfig="selectConfig"
                           :pageConfig="pageConfig"
                           url="/api-bpm/bpm/core/bpmTask/myTasks"
                           field="taskId"
                           :columns="myTaskColumns"
                  >
                    <template #status="{row,rowIndex}">
                      <a-tag v-if="row.status == 'UNHANDLE'" color="red">{{i18n('statusMap.toBeDone','待办')}}</a-tag>
                      <a-tag v-else-if="row.status == 'HANDLE'" color="green">{{i18n('statusMap.processing','处理中')}}</a-tag>
                    </template>
                    <template #assignee="{row}">
                      <a-tag v-for="taskExe in row.taskExecutors">
                        <GroupOutlined v-if="taskExe.type==='group'" />
                        <UserOutlined v-else-if="taskExe.type==='user'" />
                        &nbsp;{{ taskExe.name }}
                      </a-tag>
                    </template>
                  </rx-grid>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="myApproveTable" :tab="i18n('list.myApproveTable','我的已办')" force-render>
            <div class="flowContainer">
              <div class="flowHeader">
                <a-form  >
                  <a-row :gutter="24">
                    <a-col :span="8">
                      <a-form-item :label="i18n('form.itemTitle','事项标题')">
                        <a-input :placeholder="i18n('form.itemTitle','事项标题','input')" v-model:value="urlConfig['myApproveTable'].queryParam['Q_i.SUBJECT__S_LK']" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item :label="i18n('form.billNo','业务单号')">
                        <a-input v-model:value="urlConfig['myApproveTable'].queryParam['Q_i.BILL_NO__S_EQ']" :placeholder="i18n('form.billNo','业务单号','input')" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item >
                        <a-button type="primary" @click="search('myApproveTable')">{{$ti18('rxList.searchBtn','查询')}}</a-button>
                      </a-form-item>

                    </a-col>

                  </a-row>
                </a-form>
              </div>
              <div class="flowFooter">
                  <rx-grid ref="myApproveTable"
                           :hasPage="true"
                           :urlConfig="urlConfig['myApproveTable']"
                           :selectConfig="selectConfig"
                           :pageConfig="pageConfig"
                           url="/api-bpm/bpm/core/bpmInst/getMyApprovedInsts"
                           field="instId"
                           :columns="myApproveColumns"
                  >
                    <template #subject="{row,rowIndex}">
                      {{row.subject}}
                    </template>
                    <template #status="{row}">
                      <a-tag :color="statusMap[row.status].color">
                        <span>{{ statusMap[row.status].text }}</span>
                      </a-tag>
                    </template>
                    <template #endTime="{row}">
                      {{row.endTime}}
                    </template>
                  </rx-grid>
              </div>
            </div>
          </a-tab-pane>

          <a-tab-pane key="myReceiveTurnTable" :tab="i18n('list.myReceiveTurnTable','我收到的转发')" force-render>

            <div class="flowContainer">
              <div class="flowHeader">
                <a-form  >
                  <a-row :gutter="24">
                    <a-col :span="8">
                      <a-form-item :label="i18n('form.itemTitle','事项标题')">
                        <a-input :placeholder="i18n('form.itemTitle','事项标题','input')" v-model:value="urlConfig['myReceiveTurnTable'].queryParam['Q_A.SUBJECT__S_LK']" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="8">
                      <a-form-item >
                        <a-button type="primary" @click="search('myReceiveTurnTable')">{{$ti18('rxList.searchBtn','查询')}}</a-button>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
              </div>
              <div class="flowFooter">
                  <rx-grid ref="myReceiveTurnTable"
                           :hasPage="true"
                           :urlConfig="urlConfig['myReceiveTurnTable']"
                           :selectConfig="selectConfig"
                           :pageConfig="pageConfig"
                           url="/api-bpm/bpm/core/bpmInstCc/myRecevieTurn"
                           field="instId"
                           :columns="myReceiveTurnColumns"
                  >
                    <template #ccType="{row}">
                      <a-tag :color="turnMap[row.ccType].color">
                        <span>{{turnMap[row.ccType].text}}</span>
                      </a-tag>
                    </template>
                    <template #isRead="{row}">
                      <a-tag :color="readMap[row.instCp.isRead].color">
                        <span>{{readMap[row.instCp.isRead].text}}</span>
                      </a-tag>
                    </template>
                  </rx-grid>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </template>
    </rx-fit>
  </rx-dialog>
</template>

<script>
    import { Util } from '@lowcode/jpaas-base-lib'
    export default {
        name: "BpmMyEvents",
        props: {
            layerid: String,
            destroy: Function
        },
        data(){
            return {
                loaded:{
                    myStartTable:true,
                    myTaskTable:false,
                    myApproveTable:false,
                    myReceiveTurnTable:false
                },
                urlConfig:{
                  "myStartTable":{
                  ajaxType:'post',
                  contentType:'json',
                  queryParam:{"Q_i.STATUS__S_NEQ":"DRAFTED"},
                  dataField:'result.data',
                  totalField:'result.totalCount'
                  },
                  "myTaskTable": {
                    ajaxType:'post',
                    contentType:'json',
                    queryParam:{},
                    dataField:'result.data',
                    totalField:'result.totalCount'
                  },
                  "myApproveTable":{
                    ajaxType:'post',
                    contentType:'json',
                    queryParam:{},
                    dataField:'result.data',
                    totalField:'result.totalCount'
                  },
                  "myReceiveTurnTable":{
                    ajaxType:'post',
                    contentType:'json',
                    queryParam:{},
                    dataField:'result.data',
                    totalField:'result.totalCount'
                  }
                },
                selectConfig:{
                  type:'checkbox'
                },
                pageConfig:{
                  pageSize:10,
                  pageSizes:[10,30,40]
                },
                statusMap: {
                    DRAFTED: { color: 'gray', text: this.i18n('statusMap.draft','草稿') },
                    RUNNING: { color: 'red', text: this.i18n('statusMap.running','运行中') }, //运行
                    SUPSPEND: { color: 'black', text: this.i18n('statusMap.suspend','暂停') }, //运行
                    CANCEL: { color: 'red', text: this.i18n('statusMap.cancel','作废') }, //作废
                    SUCCESS_END: { color: 'green', text: this.i18n('statusMap.success','成功') }, // 成功结束
                    ERROR_END: { color: 'red', text: this.i18n('statusMap.abort','异常结束') }, //异常结束
                },
                typeMap: {
                    transfer: {color: 'green', text: this.i18n('statusMap.transfer','转办')},
                    agent: {color: 'red', text: this.i18n('statusMap.agent','代理')},
                },

                turnMap: {
                    "COPY": { color: 'green', text: this.i18n('statusMap.cc','抄送') },
                    "TURN_TO": { color: 'red', text: this.i18n('statusMap.forward','转发') },
                },
                readMap: {
                    "YES": { color: 'green', text: this.i18n('statusMap.yes','已读') },
                    "NO": { color: 'red', text: this.i18n('statusMap.no','未读') },
                },
                myStartColumns:[
                    {
                        title: this.i18n('form.itemTitle','事项标题'),
                        field: 'subject',
                        minWidth: 240,
                    },
                    {
                        title: this.i18n('form.billNo','业务单号'),
                        field: 'billNo',
                        minWidth: 100,
                    },
                    {
                        title: this.i18n('form.runStatus','运行状态'),
                        field: 'status',
                        slots: { default: 'status' },
                        minWidth: 100,
                    },
                ],
                myTaskColumns: [
                    {
                        title: this.i18n('form.itemTitle','事项标题'),
                        field: 'subject',
                        minWidth: 180,
                    },
                    {
                        title: this.i18n('form.billNo','业务单号'),
                        field: 'billNo',
                        minWidth: 110,
                    },
                    {
                        title: this.i18n('form.node','审批环节'),
                        field: 'name',
                        minWidth: 100,
                    },
                    {
                        title: this.i18n('form.status','状态'),
                        field: 'status',
                        slots: { default: 'status' },
                        minWidth: 120,
                    }],
                myApproveColumns: [
                {
                    title: this.i18n('form.itemTitle','事项标题'),
                    field: 'subject',
                    minWidth: 220,
                    slots: { default: 'subject' },
                },
                {
                    title: this.i18n('form.billNo','业务单号'),
                    field: 'billNo',
                    minWidth: 120,
                }],
                    myReceiveTurnColumns:[
                        {
                            title: this.i18n('form.itemTitle','事项标题'),
                            field: 'subject',
                            minWidth:180,
                        },
                        {
                            title: this.i18n('form.ccType','转发/抄送类型'),
                            field: 'ccType',
                            minWidth:120,
                            slots: { default: 'ccType' },
                        },
                        {
                            title: this.i18n('form.isRead','是否已读'),
                            field: 'isRead',
                            minWidth:120,
                            slots: { default: 'isRead' },
                        }
                    ]
            }
        },
        methods:{
            i18n(name,text,key){
                return this.$ti18(name,text,"BpmMyEvents",key);
            },
            closeWindow() {
                Util.closeWindow(this, 'cancel')
            },
            handSelectInst(){
                var rtnJson={};
                //读取列表数据
                for(var key in this.loaded){
                    var rows=this.$refs[key].getSelectedRows();
                    for(var i=0;i<rows.length;i++){
                        var o=rows[i];
                        rtnJson[o.instId]={id:o.instId,name:o.subject};
                    }
                }
                var ary=[];
                for(var key in rtnJson){
                    ary.push(rtnJson[key]);
                }
                Util.closeWindow(this, 'ok',ary);
            },
            tabClick(tab){
                if(this.loaded[tab]){
                    return;
                }
                var tabObj=this.$refs[tab];
                tabObj.loadData();
                this.loaded[tab]=true;
            },
            search(table){
                this.$refs[table].loadData();
            }

        }
    }
</script>

<style scoped>
.rxLayout .ant-form-item{
  margin-bottom: 10px;
}
.flowContainer{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding:10px;
  box-sizing: border-box;
  overflow: hidden;
}
.flowFooter{
  position: relative;
  height: 370px;
}
.flowFooter>div{
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom:0;
}
</style>
